import React from "react"
import { Card, Button } from "antd"
import ReactECharts from "echarts-for-react"

const { useState } = React
export default function Bar() {
  const [load, setLoad] = useState(true)
  const getOption = () => {
    return {
      title: {
        text: "ECharts 柱状图",
      },
      tooltip: {
        show: true, // 是否显示提示框，默认为true
        trigger: "item", // 数据项图形触发
        axisPointer: {
          // 指示样式
          type: "shadow",
          axis: "auto",
        },
      },
      xAxis: {
        type: "category",
        data: ["苹果", "香蕉", "西瓜", "葡萄", "柚子"],
      },
      yAxis: {
        type: "value",
      },
      label: {
        show: true, //显示数值
        rotate: 60, //旋转60度
        position: "inside", //标签位置
      },
      series: [
        {
          data: [735, 484, 1048, 580, 300],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    }
  }
  return (
    <>
      <Card>
        <Button
          type="primary"
          onClick={() => {
            setLoad(!load)
            setTimeout(() => {
              setLoad(true)
            }, 200)
          }}
        >
          更新
        </Button>
      </Card>
      <Card title="柱状图">
        {load ? <ReactECharts option={getOption()} /> : null}
      </Card>
    </>
  )
}
